<template>
    <div :id="id"></div>
</template>
<script>
import echartsOption from '@/option/echartOption/index';
import utils from '@/utils/throttleAndDebounce/index';

export default {
    name: 'chart',
    created() {
    },
    data() {
        return {
            option: echartsOption.basic,
            myEcharts: ''
        };
    },
    props: {
        id: { type: String, require: true },
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        markLine: {
            type: Object,
            default: () => {
                return { name: null };
            }
        }
    },
    methods: {
        //初始化图表
        initEcharts() {
            let dom = document.querySelector('#' + this.id);
            //如果图表已经存在先销毁再创建新的
            if (this.myEcharts != null && this.myEcharts !== '') {
                this.myEcharts.dispose();
            }
            if (dom) {
                this.myEcharts = this.$echarts.init(dom);
                this.myEcharts.setOption(this.option);
            }
        },
        //当dom元素发生变化之后修改图表的大小
        DomResize() {

            setTimeout(() => {
                this.initEcharts();
                let dom = document.querySelector('#' + this.id);
                if (dom) {
                    //监听dom元素的大小变化
                    const resizeObserver = new ResizeObserver(utils.throttle(entries => {
                        this.myEcharts.resize();
                        // console.log(entries);
                    }, 500));
                    resizeObserver.observe(dom);
                }
            });
        }
    },
    mounted() {
        setTimeout(this.DomResize, 10);
        /*
* 设置标线
* */
        if (this.markLine.name !== null) {
            console.log(this.markLine.min);
            this.option.series[0].markLine.data = [{
                yAxis: this.markLine.min,
                label: {
                    formatter: 'min'
                }
            }, {
                yAxis: this.markLine.standard,
                label: {
                    formatter: 'avg'
                }
            }, {
                yAxis: this.markLine.max,
                label: {
                    formatter: 'max'
                }
            }];
            /*            //低于最小值范围的数据
                        this.option.visualMap.pieces[0].max = this.markLine.min;
                        //正常范围内的数据
                        this.option.visualMap.pieces[1].min = this.markLine.min;
                        this.option.visualMap.pieces[1].max = this.markLine.standard;
                        //超出最大值范围的数据
                        this.option.visualMap.pieces[2].min = this.markLine.max;*/
        }

        /*
        *
        * 设置数据
        * */
        this.option.series[0].data = this.data;
    },
    watch: {
        //用于实现实时数据的刷新
        data: {
            handler(newVal) {//深度监听，用来检测复杂数据类型的变化
                // console.log(newVal);
                if (newVal) {
                    this.option.series[0].data = newVal;
                    this.initEcharts();
                }
            },
            deep: true
        },
        //用于设置标线的数据（最大值，最小值，标准值）
        markLine: {
            handler(newVal) {
                console.log(newVal);
                if (newVal) {
                    this.option.series[0].markLine.data = [{
                        yAxis: newVal.min,
                        label: {
                            formatter: 'min'
                        }
                    }, {
                        yAxis: newVal.standard,
                        label: {
                            formatter: 'avg'
                        }
                    }, {
                        yAxis: newVal.max,
                        label: {
                            formatter: 'max'
                        }
                    }];
                    //低于最小值范围的数据
                    this.option.visualMap.pieces[0].max = newVal.min;
                    //正常范围内的数据
                    this.option.visualMap.pieces[1].min = newVal.min;
                    this.option.visualMap.pieces[1].max = newVal.standard;
                    //超出最大值范围的数据
                    this.option.visualMap.pieces[2].min = newVal.max;
                    //设置完成之后初始化数据
                    this.initEcharts();
                }
            },
            deep: true
        }
    }
};
</script>
<style scoped>
div {
    width: 100%;
    height: 100%;
}
</style>
